<template>
  <!--  采购计划详情-->
  <div class="applicationXQ">
    <el-dialog
      title="详情"
      :visible.sync="centerDialogVisible"
      width="75%"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :before-close="close"
      class="dialog"

      >
      <div style="max-width:1000px;margin:auto;padding-bottom:50px;">
    <h4>申请信息</h4>
    <table border="1" rules="all" class="table">
      <tr>
        <td>计划单号</td>
        <td colspan="3">{{detailForm.planCode}}</td>
      </tr>
      <tr>
        <td>申请人</td>
        <td>{{detailForm.applyUserName}}</td>
        <td>申请时间</td>
        <td>{{detailForm.applyTime}}</td>
      </tr>
      <tr>
        <td>标题</td>
        <td colspan="3">{{detailForm.title}}</td>
      </tr>
      <tr>
        <td>采购类型</td>
        <td>{{detailForm.procureType==1?'设备':''}}</td>
        <!-- <td>采购周期</td>
        <td>{{detailForm.procurePeriodYear}}
          <template v-if="detailForm.procureCircleType==1">年</template>
          <template v-if="detailForm.procureCircleType==2">季</template>
          <template v-if="detailForm.procureCircleType==3">月</template>
          {{detailForm.procurePeriodQuarter}}月/季度</td> -->
        <td>采购计划</td>
        <td>
          <template v-if="detailForm.purchasePlanType==1">临时</template>
          <template v-if="detailForm.purchasePlanType==2">月度</template>
          <template v-if="detailForm.purchasePlanType==3">年度</template>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="3">{{detailForm.remark}}</td>
      </tr>
    </table>
    <h4>采购清单</h4>
    <el-table :data="detailForm.procureDevices" border>
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column label="名称" property="deviceName" align="center" width="150" show-overflow-tooltip/>
      <el-table-column label="规格型号" property="deviceModel" align="center" width="100"/>
      <el-table-column label="预计数量" property="anticipatedProcureNum" align="center" width="120"/>
      <el-table-column label="验收数量" align="center" width="120">
        <template slot-scope="scope">
          {{Number(scope.row.anticipatedProcureNum)-Number(scope.row.remainingQuantity)}}
        </template>
      </el-table-column>
      <el-table-column label="剩余数量" property="remainingQuantity" align="center" width="120"/>
      <!-- <el-table-column label="预计单价" property="anticipatedProcurePrice"/> -->
      <!-- <el-table-column label="品牌" property="deviceBrand" width="150"/> -->
      <el-table-column label="单位" property="deviceUnitName" align="center" show-overflow-tooltip/>
      <!-- <el-table-column label="生产厂家" property="supplier"/> -->
      <el-table-column label="需要程度" property="degreeNeed" align="center" show-overflow-tooltip/>
      <el-table-column label="用途" property="purpose" align="center" show-overflow-tooltip/>
      <el-table-column label="使用单位" property="recipientsDeptName" width="150px" align="center" show-overflow-tooltip/>
      <el-table-column label="设备分类" property="deviceTypeName" width="150px" align="center" />
      <el-table-column label="备注" property="remark" align="center" show-overflow-tooltip/>
      <!-- <el-table-column label="小计" prop="anticipatedSubtotal"/> -->
    </el-table>
    <!-- <div class="sum">
      <span class="h4">合计：数量</span><span class="int">{{detailForm.anticipatedTotalNumber}}</span> <span class="h4">小计</span><span class="int">{{detailForm.anticipatedTotalPrice}}</span>
    </div> -->
    <div class="upload">
      <h4>相关文件</h4>
      <div class="unloadBox">
        <div class="file" v-for="(item,index) in detailForm.annexes">
          <span class="index">{{index+1}}、</span>
          <span class="blue">{{item.fileName}}</span>
          <i class="blue el-icon-bottom" @click="fileDown(index,item.fileName,item.filePath)" ></i>
        </div>
      </div>
    </div>
    <!--    <h4>采购申请单</h4>-->
    <!--    <el-table :data="caigouList" stripe style="width: 1195px;margin-left: 15px" border>-->
    <!--      <el-table-column type="index" label="序号"  width="55"  />-->
    <!--      <el-table-column label="申请单号" property="jhdh">-->
    <!--        <template slot-scope="scope" style="text-align: center">-->
    <!--          <span style="color: #2196F3;cursor: pointer" @click="xingqing(scope.row.jhdh)">{{scope.row.jhdh}}</span>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--      <el-table-column label="申请时间"   property="biaoti"  ></el-table-column>-->
    <!--      <el-table-column label="采购标题" property="cglx"  ></el-table-column>-->
    <!--      <el-table-column label="申请人"  property="cgsl"  ></el-table-column>-->
    <!--      <el-table-column label="申请类型" property="jhje" ></el-table-column>-->
    <!--      <el-table-column label="审核状态"  property="spzt"  >-->
    <!--        <template slot-scope="scope" style="text-align: center">-->
    <!--          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.spzt=='1'" >进行中</div>-->
    <!--          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.spzt=='2'">已结束</div>-->
    <!--          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.spzt=='3'">未提交</div>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->
    <!--    <el-pagination-->
    <!--      @size-change="handleSizeChange"-->
    <!--      @current-change="handleCurrentChange"-->
    <!--      :current-page="1"-->
    <!--      :page-sizes="[10, 20, 30, 40]"-->
    <!--      :page-size="10"-->
    <!--      layout="total, sizes, prev, pager, next, jumper"-->
    <!--      style="margin-top: 15px;margin-left: 15px"-->
    <!--      :total="40">-->
    <!--    </el-pagination>-->
    <!--    <div style="text-align: center;width: 1180px;margin-top: 15px" >-->
    <!--      <el-button type="primary" size="mini" @click="shenhe">审核信息</el-button>-->
    <!--    </div>-->
    </div>
    </el-dialog>
  </div>
</template>

<script>
  import { procurePlanDetail } from '@/api/purchase/index'
  import { fileDownload } from '@/api/basicInformation/index'

  export default {
    name: 'applicationXQ',
    props:['pid'],
    data() {
      return {
        centerDialogVisible:true,
        detailForm: '',
        planList: '',
        subtotal: 0,//小计
        amount: 0//数量
      }
    },
    created() {
      this.getDetail(this.pid)
    },
    methods: {
      async getDetail(id) {
        let res = await procurePlanDetail(id)
        this.detailForm = res.data
        this.amount = 0
        this.subtotal=0
        for (let i = 0; i < this.detailForm.procureDevices.length; i++) {
          this.amount = Number(this.detailForm.procureDevices[i].anticipatedProcureNum) + Number(this.amount)
          this.subtotal = Number(this.detailForm.procureDevices[i].anticipatedProcurePrice) + Number(this.subtotal)
        }
      },
      async fileDown(index,fileName,filePath){
        this.downloadFile(encodeURI(filePath))
      },
      close(){
        this.$emit('subSetChane')
      },
    }
  }
</script>
<style lang="scss" scoped>

  .applicationXQ {
    margin-left: 20px;
    .dialog >>> .el-dialog__body{
      height: 85vh;
      overflow: scroll;
      // margin: 0 30px;
    }
    h4 {
      color: #05A380;
    }
    .blue{
      color: #2196F3;
    }
    .sum {
      margin-top: 20px;
      color: #666666;
      text-align: right;
      width: 1000px;

      .h4 {
        font-weight: bold;
      }

      .int {
        padding: 0 5px;
      }
    }

    .unloadBox {
      border: 1px solid #cccccc;
      margin-top: 20px;
      min-height: 50px;
      overflow: hidden;
      // width: 1000px;

      .file {
        width: 100%;
        border-top: 1px #cccccc dotted;
        line-height: 50px;

        .index {
          padding: 0 10px;
          color: #666
        }

        i {
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }

        .type {
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
    }

    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;

      tr {

        td:nth-child(2n-1) {
          width: 180px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 320px;
          padding-left: 10px;
        }

        td {
          line-height: 35px;
        }
      }
    }

    .el-table {
      margin-top: 20px;
      width: 1000px;
    }
  }

</style>
